<template>
	<!-- 鉴定详情 -->
	<view class="page">
		<view class="bg"></view>
		<view class="main">
			<!-- <view class="main_one" v-if="order.identified==0">
				<view class="main_one_l">鉴定编号：{{order.number}}</view>
				<view class="main_one_r"v-if="order.itemType==1">球鞋鉴定</view>
				    <view class="main_one_r" v-else>奢潮鉴定</view>
			</view> -->

			<view class="main_two">
				<view class="top">
					<view class="top_l">
						<image class="inCheck" src="/static/common/inCheck.png" mode=""></image>
						<view class="info">
							<view class="text1">专业鉴定</view>
							<view class="text2">鉴定编号：{{order.number}}</view>
							<view class="text2" v-if="order.identified!=0">
								鉴定时间：{{$fn.parseTime(order.authenticationTime)}}</view>
						</view>
					</view>
					<view class="top_r">
						<view class="sneakers" v-if="order.itemType==1">球鞋鉴定</view>
						<view class="sneakers" v-else>奢潮鉴定</view>
						<view class="status" v-if="order.authenticationResult==3">待补图</view>
						<view class="status" v-else-if="order.authenticationResult==2">无法判断</view>
						<image class="asTrue" v-else-if="order.authenticationResult==0" src="/static/tabbar/asTrue.png"
							mode=""></image>
						<image class="asTrue" v-else-if="order.authenticationResult==1" src="/static/tabbar/asFalse.png"
							mode=""></image>
					</view>
				</view>

				<view class="result" v-if="order.identified!=0">鉴定结果：
					<!-- 根据 order.authenticationResult 的值显示不同的文本 -->
					<text v-if="order.authenticationResult === 0" class="concede">鉴定为真</text>
					<text v-else-if="order.authenticationResult === 1" class="concede">鉴定为假</text>
					<text v-else-if="order.authenticationResult === 2" class="concede">无法判断</text>
					<text v-else-if="order.authenticationResult === 3" class="concede">待补图</text>
				</view>
				<view class="cause" v-if="order.identified!=0">鉴定原因：
					<text class="causetext">{{order.authenticationReasons}}</text>
				</view>
			</view>

			<view class="imgs">
				<u-swiper :list="list3" imgMode="scaleToFill" indicator indicatorMode="dot" height="654rpx" circular
					@click="enlarge"></u-swiper>
			</view>
		</view>
		<view class="btn-box">
			<button class="btn color" v-if="order.identified==0">等待鉴定</button>
			<button class="btn" v-else-if="order.authenticationResult==3"
				@click="$fn.jumpPage(`/pages/myIdentify/pages/addPhotos?param=${order.number}`)">补充照片</button>
			<button class="btn" v-else-if="order.authenticationResult==2" @click="resetOrder">重新申请</button>
			<button class="btn" v-else-if="order.authenticationResult === 0||order.authenticationResult === 1"
				@click="$fn.jumpPage(`/pages/myIdentify/pages/postingReview?param=${order.id}`)">发布评价</button>
		</view>
	</view>
</template>

<script>
	export default {
		name: "identificationDetails",
		data() {
			return {
				number: null,
				status: 4, //1.待审核 2.补充照片 3.无法判断 4.鉴定为真 5.鉴定为假
				list3: [

				],
				order: {},
				userInfo: {}
			};
		},
		onLoad(options) {
			console.log(options.param)
			this.number = options.param
			this.getOrderByNumber();
			this.userInfo = uni.getStorageSync("userInfo");
			console.log(this.userInfo, "用户信息")

		},
		onShow() {

		},
		methods: {
			getOrderByNumber() {
				this.$api.getOrderByNumber({
					number: this.number
				}).then(res => {
					console.log(res, '订单详情')
					this.order = res.data
					console.log(this.order.itemImage)
					console.log(JSON.parse(this.order.itemImage))
					let parsedItemImage = JSON.parse(this.order.itemImage)
					this.list3 = parsedItemImage.map(item => this.vuex_imgUrl + item);
				})
			},
			resetOrder() {
				this.$api.resetOrder({
					number: this.number
				}).then(res => {
					console.log(res, "重新申请的结果")

					uni.navigateBack()
					// this.$fn.jumpPage('/pages/tabbar/myIdentify')

				})
			},
			// 放大图片
			enlarge(i) {
				console.log('点击了图片', i);
				uni.previewImage({
					urls: this.list3,
					current: i
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F7F7F7;
	}

	.bg {
		width: 750rpx;
		height: 600rpx;
		background: linear-gradient(180deg, rgba(1, 255, 204, 0.5) 0%, rgba(1, 255, 204, 0) 100%);
	}

	.main {
		width: 702rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		margin: -576rpx auto 0;
		padding: 0 24rpx 24rpx;
		box-sizing: border-box;

		.main_one {
			padding: 32rpx 0;
			border-bottom: 1rpx solid #979999;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.main_one_l {
				font-size: 28rpx;
				color: #333333;
			}

			.main_one_r {
				font-size: 24rpx;
				color: #01AF21;
			}
		}


		.top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 32rpx 0 32rpx;
			border-bottom: 1rpx solid #979999;


			.top_l {
				display: flex;
				align-items: center;
				gap: 24rpx;

				.inCheck {
					width: 128rpx;
					height: 128rpx;
				}

				.info {
					height: 128rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.text1 {
						font-weight: bold;
						font-size: 32rpx;
						color: #1A1A1A;
					}

					.text2 {
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
					}

				}
			}

			.top_r {
				height: 128rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-end;

				.sneakers {
					font-size: 24rpx;
					color: #01AF21;
				}

				.status {
					width: 56rpx;
					font-weight: bold;
					font-size: 28rpx;
					color: #F53100;
					line-height: 36rpx;
				}

				.asTrue {
					width: 72rpx;
					height: 72rpx;
				}
			}

		}

		.result {
			padding: 32rpx 0;
			border-bottom: 1rpx solid #979999;
			font-weight: bold;
			font-size: 28rpx;
			color: #333333;

			.concede {
				font-weight: 400;
				color: #666666;
			}

		}

		.cause {
			font-weight: bold;
			font-size: 28rpx;
			color: #333333;
			padding: 32rpx 0;

			.causetext {
				font-weight: 400;
				color: #666666;
			}

		}




		.imgs {
			margin-top: 32rpx;
		}



	}

	.color {
		background: #E6E6E6;
		color: #666666;
	}
</style>